
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
        <a-form-item class="table-search-item" label="用户ID">
          <a-input v-model:value="searchData['officialOpenId']" placeholder="用户ID" />
        </a-form-item>
        <a-form-item class="table-search-item" label="手机号">
          <a-input v-model:value="searchData['phone']" placeholder="手机号" />
        </a-form-item>
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_DATA_REPORT_SCORE_USE_ACTION_EXPT')" type="primary" :loading="loading" @click="exportDataReports">
            <template #icon>
              <ArrowUpOutlined />
            </template>
            导出
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <span v-if="column.key === 'changeType'">
            {{ record.changeType === 'ADD' ? '增加' : '减少' }}
          </span>
          <!-- 标签 EXCHANGE_COUPON--兑换卡券，BAI_FU_JIN_MEN---百福进门 -->
          <span v-else-if="column.key === 'tag'">
            {{ record.tag === 'EXCHANGE_COUPON' ? '兑换卡券' : record.tag === 'BAI_FU_JIN_MEN' ? '百福进门' : '--' }}
          </span>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
  
  <script lang="ts" setup>
  import {$apiPointsList,$apiPointsExport} from '@/api/dataReports/goodsUse/index'
  import { ref, reactive,getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  
  const infoTableRef = ref()
 
  const loading = ref(false)
  let tableColumns = reactive([
    { key: 'fansId', title: '客户ID', dataIndex: 'fansId', fixed: 'left' },
    { key: 'phone', title: '手机号', dataIndex: 'phone' },
    { key: 'changeCause', title: '积分变动原因', dataIndex: 'changeCause' },
    { key: 'changeScore', title: '积分变动值', dataIndex: 'changeScore' },
    { key: 'changeType', title: ' 增加/减少', dataIndex: 'changeType' },
    { key: 'changeTime', title: '  积分变动时间', dataIndex: 'changeTime' },
    { key: 'tag', title: '标签', dataIndex: 'tag' },
    { key: 'agentNo4', title: '网点机构号', dataIndex: 'agentNo4' },
    { key: 'agentName4', title: '网点机构名称', dataIndex: 'agentName4' },
    { key: 'agentNo3', title: '区县机构号', dataIndex: 'agentNo3' },
    { key: 'agentName3', title: '区县机构名称', dataIndex: 'agentName3' },
  ])
  const searchData: any = ref({})
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
  
    return $apiPointsList({ ...params})
  }

  const exportDataReports = () =>{
    loading.value = true
    $apiPointsExport({}).then(res=>{
      loading.value = false
       $infoBox.message.success('导出成功')
    }).catch(()=>{
      loading.value = false
    })
  }

  // 搜索
  function searchFunc() {
    infoTableRef.value.refTable(true)
  }
  </script>